<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="角色名称:">
      <el-input v-model="findForm.name" placeholder="请输入查询条件"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="danger" @click="add">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="角色ID">
    </el-table-column>
    <el-table-column
      prop="name"
      label="角色名">
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="创建时间">
      <template v-slot="scope">
        {{leaveTime(scope.row.addTime)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新时间">
      <template v-slot="scope">
        {{leaveTime(scope.row.updateTime)}}
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button type="warning" @click="editRole(scope.row.id)">修改</el-button>
        &nbsp;
        <el-popconfirm
          title="确定删除吗？"
          @onConfirm="deleteRole(scope.row.id)"
        >
          <el-button type="danger" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="findForm.size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>

  <el-dialog
    title="添加角色"
    :visible.sync="addVisible"
    width="50%"
    :before-close="handleClose">
    <el-form ref="ruleForm" label-width="80px" :rules="rules">
      <el-form-item label="角色名称" required>
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="资源列表" required>
        <el-checkbox-group v-model="addForm.checkList">
          <el-checkbox v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id">
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="save('addFrom')">保 存</el-button>
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import {resourceList, resourceByRoleId, roleDelete, roleList, updateRole, addRole} from "@/api/role";
import moment from 'moment';

export default {
  name: "role",
  data() {
    return {
      addVisible: false,
      editMark: false,
      resourceVisible: false,
      total: undefined,
      role: undefined,
      itemList: [],
      addForm: {
        name: undefined,
        checkList: []
      },
      tableData: [],
      formInline: true,
      findForm: {
        name: undefined,
        page: 1,
        size: 10
      },
      rules: {
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      roleList(this.findForm).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
      })

      resourceList().then(res => {
        this.itemList = res.body.data
      })
    },
    //过滤秒:格式化时间
    leaveTime(value) {
      return moment(value).format('YYYY-MM-DD HH:mm');
    },
    handleClose() {
      this.role = undefined
      this.addVisible = false
      this.editMark =false
      this.resourceVisible = false
      this.editMark = false
      this.addForm = {
        name: undefined,
        checkList: []
      }
    },
    onSubmit() {
      this.init()
    },
    add() {
      this.addVisible = true
    },
    editRole(id) {
      resourceByRoleId(id).then(res => {
        this.addForm = res.body.data
        this.addForm.id = id
        this.addVisible = true
        this.editMark = true
      })
    },
    deleteRole(id) {
      roleDelete(id).then(res => {
        if (res.body.data) {
          this.init()
          this.$message.success("删除成功")
        } else
          this.$message.error("请重新操作")
      })
    },
    handleCurrentChange(page) {
      this.findForm.page = page
      this.init()
    },
    save(formName) {
      if (this.editMark) {
        updateRole(this.addForm).then(res => {
          if (res.body.data){
            this.init()
            this.$message.success("更新成功")
            this.handleClose()
          } else {
            this.$message.error("请重新修改")
          }
        })
      } else {
        addRole(this.addForm).then(res => {
          if (res.body.data){
            this.init()
            this.$message.success("添加成功")
            this.handleClose()
          } else {
            this.$message.error("请重新修改")
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
